<template>
    <div id="testTeleport">
        <teleport to="#dialog">
            <div class="dialog">
                <p>我是teleport组件的内容，可以传送到to指定的节点上</p>
                <p>{{ count }}</p>
            </div>
        </teleport>
    </div>
</template>
<script>
/**
 * 既希望继续在组件内部使用Dialog, 又希望渲染的 DOM 结构不嵌套在组件的 DOM 中。 此时就需要 Teleport 上场，
我们可以用<Teleport>包裹Dialog, 此时就建立了一个传送门，可以将Dialog渲染的内容传送到任何指定的地方
 */
/**
 * 此处 <teleport to="#dialog"> 可以将 teleport组件挂在到页面上id="dialog"的节点上
 */
import { reactive, toRefs } from 'vue'
export default {
    setup(){
        const state = reactive({
            count: 108,
        })
        return {
            ...toRefs(state)
        }
    }
}
</script>